<template>
  <div id="annualBonusReport">
    <div class="pageHead">
      <p><span>年终奖报表</span></p>
      <p>
        <el-button type="primary" @click="getaddyear">添加年终奖</el-button>
      </p>
    </div>
    <div class="pageMain">
      <div class="tableContent" >
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="100%" class="pageInnerTable" v-loading='tableLoading'>
          <el-table-column prop="yearThs" label="年终奖" width="180">
          </el-table-column>
          <el-table-column prop="companyName" label="所属公司" width="180">
          </el-table-column>
          <el-table-column prop="peopleNumber" label="发放人数" width="180">
          </el-table-column>
          <el-table-column prop="yfAnnualBonusTotal" label="应发年终奖总额">
          </el-table-column>
          <el-table-column prop="taxPayable" label="应纳税额">
          </el-table-column>
          <el-table-column prop="sfAnnualBonusTotal" label="实发年终奖总额">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span style="color:#409EFF;cursor: pointer;" @click="editsave(scope.row)">填写</span> &nbsp;
              <span style="color:#409EFF;cursor: pointer;" @click="ondelList(scope.row.id)">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination @getTableData="getList" :total="100" :listQuery="listQuery" /> -->
      </div>
    </div>
    <!-- //添加年终奖 -->
    <el-dialog title="添加年终奖" :visible.sync="isVisible" width="375px" :before-close="handleClose" :close-on-click-modal="false">
      <div class="container-row">
        <el-form :model="addparms" ref="vForm" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="所属公司：" class="label-center-align">
                <el-select v-model="addparms.subId" class="full-width-input" clearable @change="selectCom">
                  <el-option v-for="item in setCompanyList" :key="item.subid" :label="item.subName" :value="item.subid"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属年份：" class="label-center-align">
                <el-select v-model="addparms.year" class="full-width-input" clearable @change="selectChange">
                  <el-option v-for="(item, index) in yearsToNow" :key="index" :label="item.name" :value="item.name" :disabled='item.status'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button type="primary" @click="goNext">下一步</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import pagination from '@/components/pagination.vue';
import { getYearsToNow } from '@/util/util';
import { mapState } from 'vuex';
import requestList from '@/api/moduleApi_xc/management';
import { getCompanyList, Base64 } from '@/util/xc/utils';
export default {
  name: "annualBonusReport",
  // components: {
  //   pagination
  // },
  data() {
    return {
      tableData: [{}],
      isVisible: false,
      tableLoading: false,
      yearsToNow: [], //选择年份区间
      addparms: {
        subId: '',
        year: ''
      },
    };
  },
  mounted() {
    getCompanyList();
    this.onReport();
   
  },
  created() {
    let thit = this;
    this.$bus.$on('successchange', function(msg) {
      thit.onReport();
    });
  },
  computed: {
    ...mapState({
      setCompanyList: state => state.reward.companyList,
    })
  },
  methods: {
    getaddyear() {
      this.isVisible = true;
      this.addparms = {
        subId: '',
        year: ''
      };
    },
   
    //onReport
    async onReport() {
      const { data } = await requestList.GetAnnualBonusReport().then(res => res.data);
      this.tableData = data;
    },
    // 关闭弹窗
    handleClose() {
      this.isVisible = false;
    },
    //选择公司
    selectCom(e) {
      this.addparms.year = '';
      if (e != '') {
        let obj = this.setCompanyList.find(item => item.subid == e);
        let createTime = obj.createTime.length > 4 ? obj.createTime.substring(0, 4) : '';
        let playerPool = getYearsToNow(createTime);
        let result = playerPool.map(name => ({ name, status: false }));
        this.yearsToNow = result;
      }
    },
    // 选择日期
    selectChange(e) {
      this.yearsToNow.forEach(item => {
        if (item.name == e) {
          item.status = true;
        }
      });
    },
    //*删除操作
    ondelList(id) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestList.GetdelAnnualBonus(id).then(res => {
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.onReport();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // *下一步添加年终奖
    goNext() {
      if (this.addparms.subId == "") {
        this.$message({
          type: 'warning',
          message: '你还没选择公司'
        });
        return;
      }
      if (this.addparms.year == "") {
        this.$message({
          type: 'warning',
          message: '你还没选择日期'
        });
        return;
      }
      requestList.GetaddAnnualBonus(this.addparms).then(res => {
        let { status } = res.data;
        if (status == 200) {
          this.$router.push(`annualBonusDetail?subid=${Base64.encode(JSON.stringify(this.addparms.subId))}&year=${Base64.encode(JSON.stringify(this.addparms.year))}&abid=${Base64.encode(JSON.stringify(res.data.data))}&status=1`);
          this.$bus.$emit('saveinit', '新增');
          this.handleClose();
        }
      });
    },
    //填写
    editsave(row) {
      let obj = this.setCompanyList.find(item => item.subName == row.companyName);
      requestList.GeteditAnnualBonus({ abId: row.id }).then(res => {
        let { status } = res.data;
        if (status == 200) {
          this.$router.push(`annualBonusDetail?subid=${Base64.encode(JSON.stringify(obj.subid))}&year=${Base64.encode(JSON.stringify(row.year))}&abid=${Base64.encode(JSON.stringify(row.id))}&status=2`);
          this.$bus.$emit('saveinit', '编辑');
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
#annualBonusReport {
  .pageHead {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .container-row {
    padding: 20px 0px 20px 0px;
  }
  .pageMain{
    .tableContent{
      padding-left: 0px;
    }
  }
}
</style>